<template>
	<view>
		<view class=" box-shadow2">
			<view class="videoSelect" v-if="xiugaistate == 1">
				<view class="camera-fill" @click="addVideo()">+</view>
				<view class="anniu">点击上方按钮添加视频修改MD5</view>
			</view>
			<video @loadedmetadata="loadedmetadata" :src="urldata" v-if="xiugaistate == 2"
				style="width: 100%;max-height: 400rpx;"></video>
		</view>
		<view class="box-shadow2">
			<view class="content_z_c" v-if="xiugaistate==2">
				<view class="">
					<span class="fwbold">视频时间：</span>{{durationtime}}
				</view>
				<view class="mt30">
					<span class="fwbold">视频大小：</span>{{videosize}}
				</view>
				<view class="mt30">
					<span class="fwbold">修改前MD5：</span>{{oldmd5}}
				</view>
				<view class="mt30">
					<span class="fwbold">修改后MD5：</span>{{newmd5}}
				</view>
			</view>
		</view>

		<view class="cu-btnview" v-if="xiugaistate==2">
			<button class="cu-btn line-orange shadow" @click="resetvideo()">清空内容</button>
			<button class="cu-btn bg-gradual-orange shadow " @click="savevideo()">保存视频</button>
		</view>

		<view class="md5ZuoYong" style="" @click="showTips('有效解决视频的唯一性，防重检测，达到原创效果，轻松上热门')">
			修改MD5可以干嘛？
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	var o = uni.getFileSystemManager();
	export default {
		data() {
			return {
				xiugaistate: 1,
				urldata: '',
				oldmd5: "",
				newmd5: "",
				durationtime: "",
				videosize: ""
			}
		},
		onLoad(option) {
			console.log(22, option)
			if (option.tempFilePath) {
				this.resetvideo()
				this.saveVideo(option.tempFilePath)
			}
		},
		methods: {
			showTips(msg) {
				uni.showModal({
					content: msg,
					confirmText: '确定'
				})
			},
			// 添加视频
			addVideo() {
				// #ifndef MP-WEIXIN
				return;
				// #endif
				var t = this;
				uni.chooseVideo({
					sourceType: ["album"],
					success: (res) => {
						console.log(33, res)

						let filePath = res.tempFilePath
						this.saveVideo(filePath)
					}
				});
			},
			loadedmetadata(e) {
				console.log('loadedmetadata', e)
				this.durationtime = util.duration(e.detail.duration)
			},
			saveVideo(tempFilePath) {
				uni.getFileInfo({
					filePath: tempFilePath,
					success: function(e) {
						t.oldmd5 = e.digest
						t.videosize = util.kb(e.size)
					}
				})

				let filePath = wx.env.USER_DATA_PATH + "/test.mp4"
				var t = this;
				o.saveFile({
					tempFilePath,
					filePath,
					success: function(e) {
						console.log(e);
						o.appendFile({
							filePath,
							data: "01",
							success: function(e) {
								uni.getFileInfo({
									filePath,
									success: function(e) {
										if (e.errMsg == "getFileInfo:ok") {
											t.newmd5 = e.digest
											t.urldata = filePath
											t.xiugaistate = 2
										}
									}
								});
							}
						});
					}
				});
			},
			// 清空视频
			resetvideo() {
				// #ifndef MP-WEIXIN
				return;
				// #endif
				var e = this;
				uni.getFileSystemManager().unlink({
					filePath: wx.env.USER_DATA_PATH + "/test.mp4",
					success: function(t) {
						if ("unlink:ok" == t.errMsg) {
							e.xiugaistate = 1
						}

					}
				});
			},
			// 保存视频
			savevideo() {
				// #ifndef MP-WEIXIN
				return;
				// #endif
				var e = this,
					t = wx.getFileSystemManager();
				wx.saveVideoToPhotosAlbum({
					filePath: wx.env.USER_DATA_PATH + "/test.mp4",
					success: function(i) {
						"saveVideoToPhotosAlbum:ok" == i.errMsg && t.unlink({
							filePath: wx.env.USER_DATA_PATH + "/test.mp4",
							success: function(t) {
								if ("unlink:ok" == t.errMsg) {
									e.xiugaistate = 1
									uni.showToast({
										icon: 'none',
										title: '视频保存成功，请到手机相册中查看'
									})
								}
							}
						});
					},
					fail: function(t) {
						if ("saveVideoToPhotosAlbum:fail auth deny" == t.errMsg) {
							wx.showModal({
								title: "保存失败",
								content: "你需要设置授权保存到相册",
								cancelText: "不设置",
								confirmText: "去设置",
								success: function(e) {
									e.confirm ? wx.openSetting({
										success: function(e) {}
									}) : e.cancel;
								}
							})
						}

						if ("saveVideoToPhotosAlbum:fail invalid video" == t.errMsg) {
							uni.showToast({
								icon: 'none',
								title: '视频保存失败，联系客服修复'
							})
						}

					}
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.videoSelect {
		padding-bottom: 30rpx;
	}

	.camera-fill {
		color: #55aaff;
		font-size: 100rpx;
		width: 130rpx;
		height: 115rpx;
		padding-bottom: 15rpx;
		margin: 30rpx auto;
		border-radius: 50%;
		border: 1px solid #55aaff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.anniu {
		text-align: center;
	}

	.content_z_c {
		overflow: hidden;
		width: 100%;
		height: 100%;
		font-size: 26rpx;
		padding: 30rpx;
		color: #333;
		box-sizing: border-box;
	}

	.bg-gradual-orange {
		background-image: linear-gradient(45deg, #ff9700, #ed1c24);
		color: #ffffff;
		margin-left: 20rpx;
	}

	.box-shadow2 {
		box-shadow: 0px 5px 5px 0px #EDEDED;
	}

	.cu-btnview {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}

	.cu-btn {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30upx;
		font-size: 28upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}

	.cu-btn::after {
		display: none;
	}

	.shadow {
		box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
	}

	.md5ZuoYong {
		text-align: center;
		margin-top: 40rpx;
		text-align: center;
		text-decoration: underline;
	}
</style>